<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>飞付支付</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="shortcut icon" href="http://pay.feifu888.com/img/logo.png">
    <!-- 引入样式 -->
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet">
    <style>

    html, body, #app {
      height: 100%;
      overflow-y: auto;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .flex{
      display: flex;
    }
    .main {
      display: flex;
      height: 100%;
      flex-direction: column;
      justify-content: center;
      padding: 30px;
      margin: auto;
    }

    .qrcode {
      width: 200px;
      height: 200px;
      margin: auto;
      margin-top: 20px;
      /*border: 1px solid transparent;*/
    }

    .title {
      margin: auto;
      /*height: 20px;*/
      text-align: center;
      padding: 5px;
    }

    .remark {
      margin: auto;
      /*height: 18px;*/
      text-align: center;
      font-size: 14px;
      margin-top: 20px;
      padding: 5px;
      color: red;
    }

    .qrcode img {
      width: 100%;
      height: 100%;
      border:0;
    }

    .img1 {
      width: 80px;
      height: 80px;

    }

    @media (max-width: 765px) {
      h3 {
        margin: 5px;
      }

      .main {
        padding: 5px;
      }

      .col-xs-5{
        width: 41%!important;
      }
      .col-xs-2{
        width: 16.6%!important;
      }
      .col-xs-12{
        width: 100%;
      }
      .header {
        padding: 0 !important;
        text-align: left;
      }

      .number {
        text-align: left !important;
      }
    }
  </style>
</head>

<body style="background: url('http://pay.feifu888.com/img/back.png') no-repeat;'backgroundSize:cover'">
<div id="app">

    <div class="main" style="width:90%">
        <div class="row" style="margin:10px 0" >
            <div class="col-sm-2 col-xs-5"><img src="http://pay.feifu888.com/img/logo.png" style="width: 100%;height: 100%;"/></div>
            <div class="col-sm-1 col-xs-2"><span
                    style="border-right: black solid 1px;width:1px;height: 100%;margin: auto;display: block;"></span></div>
            <div class="col-sm-2 col-xs-5 flex"><span style="font-size: 18px;align-self: center">在线支付</span></div>
            <div class="col-sm-7 show" style="text-align: right;padding-right: 40px;font-size: 30px">倒计时：<b
                    style="color:red" class="set_time" ></b> 秒
            </div>
        </div>
        <div class="row">
            <div class="col-sm-8 show-back"   style="text-align: center;font-size: 30px;display: none">倒计时：
                <b class="set_time" style="color:red" ></b> 秒
            </div>

        </div>
        <div class="header" style="background-color: white;padding: 20px;">
            <h3 style="padding-left: 40px">支付详情:</h3>
            <div class="number row" style="text-align: center">
                <div class="col-sm-4 col-xs-12" style="padding: 10px;">
                    <b>订单编号：</b><span class="orderNo"></span>
                </div>
                <div class="col-sm-4 col-xs-12" style="padding: 10px;">
                    <b>订单内容：</b><span class="orderContent"></span>
                </div>
                <div class="col-sm-4 col-xs-12" style="padding: 10px;">
                    <b>支付金额(元)：</b><span class="amount"></span>
                </div>
            </div>
        </div>
        <div style="margin-top:5px;background-color: #F3F3F4;flex: 1;position: relative;">
            <!--<h3 style="padding-left: 40px">付款方式</h3>-->
            <div class="remark"><b></b></div>
            <div class="title"><b></b></div>
            <div  class='qrcode show3'>
                <img src="" alt="">

            </div>
            <div  class="show2" style="width: 80%;margin: 30px auto;text-align: left;display: none;justify-content: center;">
                <img class="img1" src="http://pay.feifu888.com/img/success.gif" alt="">
                <h4 style="line-height: 80px;margin-left: 15px">您的支付已经成功</h4>
            </div>

        </div>

    </div>

</div>

</body>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<script>
  var panUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data='
  var set_id
  var time_id
  var frontUrl
  browserRedirect(function (data) {
    var baseUrl = 'http://pay.feifu888.com/v2/73/'
    if (data == '电脑') {
        $('.show').css('display', 'block')
        $('.show-back').css('display', 'none')
      getJqueryAjax(baseUrl + '2', function (data) {
        if (data.code == '000000') {
          if (data.data.notifyMsg) {
//            app.$alert(data.data.notifyMsg, '提示', {
//              confirmButtonText: '确定',
//              type: 'info',
//              callback: action => {
//
//              }
//            })
              var attr = data.data.code.split('||')
              if (attr[0] == 'image') {
                  $('.qrcode img').attr('src', attr[1])
              } else {
                  $('.qrcode img').attr('src', panUrl + encodeURIComponent(data.data.code))
              }
              frontUrl = data.data.frontUrl
          } else {
            var attr = data.data.code.split('||')
            if (attr[0] == 'image') {
              $('.qrcode img').attr('src', attr[1])
            } else {
              $('.qrcode img').attr('src', panUrl + encodeURIComponent(data.data.code))
            }
            frontUrl = data.data.frontUrl
          }

        }

      })
    }
    if (data == '手机') {
        $('.show').css('display', 'none')
        $('.show-back').css('display', 'block')
      getJqueryAjax(baseUrl + '1', function (data) {
        if (data.code == '000000') {
          var skipUrl = data.data.code
          var payType = data.data.payType
          if (data.data.notifyMsg) {
//            app.$alert(data.data.notifyMsg, '提示', {
//              confirmButtonText: '确定',
//              type: 'info',
//              callback: action => {
//
//              }
//            })
              if (payType == 2 || payType == 7 || payType == 8) {
                  window.location.href = skipUrl
              } else {
                  var attr = data.data.code.split('||')
                  if (attr[0] == 'image') {
                      $('.qrcode img').attr('src', attr[1])
                  } else {
                      $('.qrcode img').attr('src', panUrl + encodeURIComponent(data.data.code))
                  }
              }
          } else {
            if (payType == 2 || payType == 7 || payType == 8) {
              window.location.href = skipUrl
            } else {
              var attr = data.data.code.split('||')
              if (attr[0] == 'image') {
                $('.qrcode img').attr('src', attr[1])
              } else {
                $('.qrcode img').attr('src', panUrl + encodeURIComponent(data.data.code))
              }
            }
          }

        }

      })

    }

  })
 // 倒计时
  function leftTimer() {
      var num = 240
      time_id = setInterval(function () {
          $('.set_time').html(num)
          if (num == 0) {
              clearInterval(time_id)
          }
          num--
      }, 1000)
  }
  leftTimer()
  // 判断支付状态
  function getOrderStatus () {
    var url = 'http://pay.feifu888.com/v2/query/73'
    getJqueryAjax(url, function (data) {
      if (data.data == 4 || data.data == 5 || data.data == 6) {
        if (frontUrl) {
          location.href = frontUrl
        }
        clearInterval(set_id)
        clearInterval(time_id)
          $('.show3').css('display', 'none')
          $('.show2').css('display', 'flex')
      }
    })
  }

  getOrderStatus()
  set_id = setInterval(function () {
    getOrderStatus()
  }, 5000)

  //把url转化为二维码
  function qrcodeUrl (url) {
    $('.qrcode').html('')
    $('.qrcode').qrcode({
      render: 'canvas', // 渲染方式有table方式和canvas方式
      width: 200, //默认宽度
      height: 200, //默认高度
      text: url, //二维码内容
      typeNumber: -1, //计算模式一般默认为-1
      correctLevel: 2, //二维码纠错级别
      background: '#ffffff', //背景颜色
      foreground: '#000000' //二维码颜色

    })
  }

  //jquery的ajax请求
  function getJqueryAjax (url, success) {

    $.ajax({
      type: 'get',
      url: url,
      data: {},
      dataType: 'json',
      beforeSend: function (xhr) {
        console.log('start')
      },
      success: function (data) {
        success(data)
        $('.orderNo').text(data.data.outOrderNo)
        $('.orderContent').text(data.data.body)
        $('.amount').text(data.data.amount)
        $('.remark b').text(data.data.remark)
        //jquery的ajax请求
        switch (data.data.payType) {
          case 1:
            $('.title b').text('支付宝')
            break
          case 3:
            $('.title b').text('京东')
            break
          case 4:
            $('.title b').text('QQ')
            break
          case 5:
            $('.title b').text('网银快捷')
            break
          case 6:
            $('.title b').text('微信')
            break
          case 9:
            $('.title b').text('银联扫码')
            break
          default:
            break
        }
      },
      error: function (err) {
        console.log('error')
      }
    })

  }

  /**
   * 判断登录状态为手机或者电脑
   */
  function browserRedirect (success) {
    var sUserAgent = navigator.userAgent.toLowerCase()
    var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad'
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == 'iphone os'
    var bIsMidp = sUserAgent.match(/midp/i) == 'midp'
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4'
    var bIsUc = sUserAgent.match(/ucweb/i) == 'ucweb'
    var bIsAndroid = sUserAgent.match(/android/i) == 'android'
    var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce'
    var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile'

    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
      success('手机')
    } else {
      success('电脑')
    }
  }

</script>
</html>
